<!DOCTYPE html>
<html>
<head>
	<title>Alpha</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		.self{
			top: 50%;
			left: 50%;
			position: absolute;
			z-index: 100;
		}
		.item{
			height: 45px;
			width: 37px;
			margin-top: -28px;
			margin-left: -19px;
		}
		.text{
			position:absolute;
			left: 70%;
			top: 30%;
			height: 30px;
			width: 70px;
			border-radius: 6px;
			border: none;
			font-size: 16px;
		}
		@keyframes goaway{
			0% {opacity: 1;}
			70% {opacity: 1;}
			100% {opacity: 0;}
		}
		.showmsg{
			position: relative;
			height: 51px;
			width: 80px;
			margin-top: -13%;
			left: 8%;
			background-size: 100%;
			background-image: url(./images/msgbox.png);
			background-repeat: no-repeat;
			animation: goaway 3s;
			animation-fill-mode: forwards;
		}
		.msg{
			position: absolute;
			top: 30%;
			left: 10%;
			word-wrap: break-word;
			word-break: break-all;
			color: white;
		}
	</style>
	<script src="./js/base64.js"></script>
	<script type="text/javascript">
		var x = 1000;
		var y = 1000;
		var username;
		var id;
		var mouseX = 0, mouseY = 0;
		var wsocket;
		function init(){
			var host = "ws://127.0.0.1:8000/";
			try{
				wsocket = new WebSocket(host);
				wsocket.onopen    = function(msg){ ; };
				wsocket.onmessage = function(msg){ log(msg.data); };
				wsocket.onclose   = function(msg){ log("服务器关闭!"); };
			}
			catch(ex){ log(ex); }
		}
	</script>
</head>
<body>
	<div class="self">
		<img class="item" src="./images/item.gif">
		<div class="username"></div>
		<!-- <input class="text" type="text"></input> -->
	</div>
	<div class="back">
	</div>
</body>
<script src='js/jquery.js'></script>                
<script src='js/jquery-starfield.js'></script>
<script type="text/javascript">
	var docHeight = $(document).height();
	var docWidth = $(document).width();
	mouseX = docWidth/2;
	mouseY = docHeight/2;
	$('.back').css({
		"height": docHeight+"px",
		"width": docWidth+"px",
		"overflow": "hide"
	});
	$('.canvas').css({
		"height": docHeight+"px",
		"width": docWidth+"px"
	})
	$('.back').starfield({
		starDensity: 2.0,
  		mouseScale: 0.5,
  		seedMovement: false
	});
	$('.username').css({
		"color": "white",
		"font-size": "12px"
	})
	var status = 0;
	$(document).keydown(function(event){
		if (event.keyCode === 13) {
			if (status == 0) {
				$('.showmsg').remove();
				$('.self').append("<input class='text' type='text'/>");
				$('.text').focus();
				status = 1;
			}else{
				var msg = $('.text').val();
				var m = username+':'+msg+':'+x+','+y;
						console.log(m);
				send(m);
				$('.text').remove();
				// if (msg.length != 0){
				// 	var wi = 25+ msg.length*10;
				// 	$('.self').append("<div class='showmsg'><div class='msg'>"+msg+"</div></div>");
				// 	$('.showmsg').css({
				// 		"width": wi+"px",
				// 		"height": wi/43*32+"px"
				// 	})
				// }
				status = 0;
			}
		}
	});
	document.onmousemove = function(event){
		event = event||window.event
		mouseX = event.clientX;
		mouseY = event.clientY;
	}
	setInterval(function(){
			var tmpx = mouseX - docWidth/2;
			x = x + tmpx * 0.02;
			var tmpy = mouseY - docHeight/2;
			y = y + tmpy * 0.02;
			// console.log(mouseX+','+mouseY);
			// console.log(tmpx+','+tmpy);
			// console.log(x+','+y);
			send(username+':'+x+','+y);
		}, 200);
	function send(msg){
		var msg_encode = Base64.encode(msg);
		try{ 
			wsocket.send(msg_encode); 
		} 
		catch(ex){ 
			log(ex);
		}
	}

	window.onbeforeunload=function(){
		var data = Base64.encode('quit');
		try{ 
			wsocket.send(data); 
			wsocket.close();
			wsocket=null;
		}
		catch(ex){ 
			log(ex);
		}
	};

	function log(msg){
		msg = Base64.decode(msg);
		var tmp = msg.split(' ');
		if(tmp[0]=='Welcome'){
			var tmp2 = msg.split(':');
			id = tmp2[tmp2.length-1];
		}else{
			var tmp1 = msg.split(':');
			if (tmp1[0]=='系统消息') { //系统消息
				var tm = msg.split('*');
				console.log(tm[1]);
				$('#'+tm[1]).remove();
			}
			if (tmp1.length == 4 && tmp1[0] != id) {
				var site = tmp1[3].split(',');
				var newx = parseInt(site[0]);
				var newy = parseInt(site[1]);
				if (newx-x>docWidth/2 || x-newx>docWidth/2){	
					if ($('#'+tmp1[0])){
						$('#'+tmp1[0]).remove();
					}
				} else if (newy-y>docHeight/2 || y-newy>docHeight/2){
					if ($('#'+tmp1[0])){
						$('#'+tmp1[0]).remove();
					}
				} else {
					if ($('#'+tmp1[0])){
						$('#'+tmp1[0]).remove();
					}
					$("body").append("<div id='"+tmp1[0]+"' style='position:absolute;top:"+(newy-y+docHeight/2)+"px;left:"+(newx-x+docWidth/2)+"px;'><img class='item' src='./images/item.gif'><div style='color:white;font-size:12px;'>"+tmp1[2]+"</div></div>");
				}
			} 
			if (tmp1.length > 4) {
				console.log(msg);
				var m = '';
				for (var i = 3; i < tmp1.length-1; i++) {
					m += tmp1[i];
					if (i < tmp1.length-2) {
						m += ':';
					}
				}
				console.log(m);
				console.log(m.length);
				if (m.length != 0){
					var site = tmp1[4].split(',');
					var newx = parseInt(site[0]);
					var newy = parseInt(site[1]);
					var wi = 25+ m.length*10;
					console.log(m);
					console.log(tmp1[0]);
					$('body').append("<div class='showmsg' style='position:absolute;top:"+(newy-y+docHeight/2+25)+"px;left:"+(newx-x+docWidth/2+5)+"px;margin:0'><div class='msg'>"+m+"</div></div>");
					$('.showmsg').css({
						"width": wi+"px",
						"height": wi/43*32+"px"
					})
				}
			}
		}
	}
	var $_GET = (function(){
		var url = window.document.location.href.toString();
		var u = url.split("?");
		if(typeof(u[1]) == "string"){
			u = u[1].split("&");
			var get = {};
			for(var i in u){
				var j = u[i].split("=");
				get[j[0]] = j[1];
			}
			return get;
		} else {
			return {};
		}
		})();
	window.onload = function(){
		init();
		username = decodeURI($_GET['username']);
		$('.username')[0].innerHTML=username;
	}
	</script>
</html>